<template>
    <nav id="tab" class="border-1px">
        <template v-for="item in navList">
            <router-link class="tab-item" :to="item.to" exact>{{item.name}}</router-link>
        </template>
    </nav>
</template>

<script>
    export default {
        name: 'Nav',
        data() {
            return {
                navList: [
                    {name: '商品', to: '/goods'},
                    {name: '评论', to: '/ratings'},
                    {name: '商家', to: '/seller'}
                ]
            }
        }
    }
</script>

<style>
    #tab {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        position: relative;
        z-index: 1;
    }

    #tab::after {
        content: '';
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        border-bottom: 1px solid rgba(7, 17, 27, .1);
    }

    .tab-item {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: rgb(77, 85, 93);
    }

    .tab-item.active {
        color: rgb(240, 20, 20);
        border-bottom: 2px solid rgb(240, 20, 20);
    }
</style>